<template>
  <el-dialog
    title="部门管理"
    :visible.sync="depDialogVisible"
    width="20%"
    :before-close="handleClose"
    class="dep-dialog"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
    >
      <el-form-item label="上级:" prop="father">
        <el-select
          ref="selectRef"
          v-model="ruleForm.father"
          placeholder="请选择"
          style="width: 80%"
        >
          <el-option label="请选择" value="0" style="display: none"></el-option>
          <!-- <el-tree
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          >
          </el-tree> -->
          <el-tree
            :data="treeData"
            :props="defaultProps"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span style="font-size: 12px">{{ node.label }}</span>
              <span style="margin-left: 5px">
                <el-button
                  class="el-icon-remove-outline"
                  type="text"
                  size="mini"
                  @click.stop="() => remove(node, data)"
                >
                </el-button>
              </span>
            </span>
          </el-tree>
        </el-select>
      </el-form-item>

      <el-form-item label="名称:" prop="name">
        <el-input style="width: 80%" v-model="ruleForm.name"></el-input>
      </el-form-item>

      <el-form-item>
        <div class="footer">
          <el-button
            class="save-btn"
            type="primary"
            @click="submitForm('ruleForm')"
            >保存</el-button
          >

          <el-button @click="resetForm('ruleForm')" class="resletBtn">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {getUUID} from "@/utils/tool";
import moment from "moment";
export default {
  name: "DepartmentDialog",
  components: {},
  props: ["depDialogVisible", "treeData"],
  data() {
    return {
      selectData: {},
      ruleForm: {
        name: "",
        father: "",
      },
      selectDep: "请选择",
      rules: {
        name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
        father: [{ required: true, message: "请选择上级", trigger: "blur" }],
      },
      // treeData: [
      //   {
      //     id: 1,
      //     name: "一级 1",
      //     createTime: "2023-02-09 13:40:16",
      //     childDepartment: [],

      //   },
      // ],
      defaultProps: {
        children: "childDepartment",
        label: "name",
      },
    };
  },
  methods: {
    append(data) {
      // console.log(data);
      const newChild = { _id: getUUID(),createTime:moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),userId:localStorage.getItem("SET_USERID"),name: this.ruleForm.name, childDepartment: [] };
      if (!data.children) {
        this.$set(data, "childDepartment", []);
      }
      data.childDepartment.push(newChild);
    },
    remove(node, data) {
      console.log(data, "data==============");
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);

      this.$emit('delete')
    },
    handleNodeClick(data) {
      this.selectData = data;
      console.log(data);
      this.$refs.selectRef.blur();
      this.ruleForm.father = data.name;
    },
    handleClose() {
      this.$emit("close", 1);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.append(this.selectData);
          this.$emit("close", 2, this.treeData);
          console.log(this.treeData, "treeData-----------");
          // this.$emit("close");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$emit("close", 1);
    },
  },
  created() {},
};
</script>
<style lang="scss" scoped>
.footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  //   button {
  //     width: 100px;
  //     height: 40px;
  //   }
  //   .save-btn {
  //     background-color: rgba(68, 42, 141, 1);
  //     color: #ffffff;
  //   }
}
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
::v-deep .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}
</style>
